<template>
  <div>
    <div>
      <!-- <el-input
      v-model="query"
      placeholder="Please enter keyword"
      @input="onQueryChanged"
    /> -->
      <el-button @click="addMenu">新增</el-button>
      <el-tree-v2
        ref="treeRef"
        :data="data.menu"
        :props="props"
        :filter-method="filterMethod"
        :height="208"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <span>{{ node.label }}</span>
            <template v-if="!['admin', 'menuManage'].includes(data.node)">
              <span>
                <a> 修改</a>
                <a style="margin-left: 8px"> 删除 </a>
              </span>
            </template>
          </div>
        </template>
      </el-tree-v2>
    </div>
    <el-dialog v-model="formShow" :title="title">
      <editForm :menu="data.menu"></editForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="formShow = false">Cancel</el-button>
          <el-button type="primary" @click="formShow = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import api from "@/api/menu";
import { menuTree } from "@/utils/menuTree.js";
import editForm from "./menu/editForm";
let query = ref("");
let data = reactive({ menu: [] });
const props = { value: "id", label: "menuName", children: "child" };
let formShow = ref(false);
let title = ref("新增");
function onQueryChanged(params) {}
function filterMethod(params) {}
async function getMenu() {
  let res = await api.menuList();
  data.menu = menuTree(res.data, true);
}
getMenu();
function addMenu() {
  formShow.value = true;
  title.value = "新增";
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}
</style>
